<%--
  Function: 
  User: PING
  Date: 2022/10/25

--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<h3>Ajax演示</h3>
选择所喜爱国家：
<select name="nation" id="nation" onchange="selectCity();">
    <option value="0" selected="selected">--&nbsp;</option>
    <option value="1" >中国</option>
    <option value="2" >美国</option>
    <option value="3">日本</option>

</select>
<br>
所在喜爱城市：
<select name="city" id="city" >
    <option value="0" selected="selected">--&nbsp;</option>
</select>

<div id="output"></div>
<br><hr>
<h3>您对这门课程的感兴趣吗？</h3>
<form id="ratingForm" action="ratingServlet" method="POST">
    <input type="radio" name="rating" value="5" checked="checked">5
    <input type="radio" name="rating" value="4">4
    <input type="radio" name="rating" value="3">3
    <input type="radio" name="rating" value="2">2
    <input type="radio" name="rating" value="1">1
    <br>
    理由是：<br>
    <textarea id="comment" cols="20" rows="5" ></textarea><br>
    <input type="button" value="确定" onclick="ratingProcess();"/>
</form>
<div id="showRating" style="border:1px solid green; display:none; width:50%">
</div>


<script type="text/javascript">

    function createXMLRequest() {
        var xhr ;
        if(window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else if(window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e) {
                try{
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                } catch(e){
                    console.log("XHR创建失败！") ;
                }
            }
        }
        return xhr ;
    }

    function selectCity() {
        var nationId ;
        var $select = document.getElementById("nation") ;
        for (var i=0; i<$select.length; i++) {
            if ($select[i].selected) {
                nationId = $select[i].value;
                break ;
            }
        }
        console.log(nationId) ;
        var paramStr = "action=selectCity&" + "nationId=" + nationId ;
        var xhr = createXMLRequest() ;
        xhr.open(
            "GET",
            "/01_jspBasics/test/nativeAjax?" + paramStr
        ) ;
        xhr.onreadystatechange =  function() {
            if (xhr.readyState == 0) {
                console.log("uninitialized.") ;
            } else if (xhr.readyState == 1) {
                console.log("opening") ;
            } else if (xhr.readyState == 2) {
                console.log("sent") ;
            } else if (xhr.readyState == 3) {
                console.log("receiving") ;
            } else if (xhr.readyState == 4) {
                console.log("loaded") ;
                if (xhr.status == 200) {
                    console.log("sucess proccessed.") ;
                    var respText = xhr.responseText;
                    console.log(respText);
                    var cities = respText.split('|');
                    var $citySelect = document.getElementById("city");
                    var newOption;
                    var oldOptions = $citySelect.options;
                    // 删除原来已选的所有选择
                    $citySelect.options.length = 0;

                    cities.forEach(function (item, index) {
                        newOption = document.createElement("option");
                        newOption.innerHTML = item;
                        $citySelect.appendChild(newOption);
                    })
                }


            }

        } ;
        xhr.send() ;

    }

    function ratingProcess() {

        var $show = document.getElementById("showRating") ;
        $show.innerHTML = "";
        var ratingForm = document.getElementById("ratingForm");
        var ratings = ratingForm.rating;
        var ratingValue = null;
        for(var i=0; i<ratings.length; i++) {

            if(ratings[i].checked){
                ratingValue = ratings[i].value;
                break;
            }
        }
        var comm = ratingForm.comment.value;
        // 先创建一个js对象
        var payloadJson = {
            rating:ratingValue,
            comm:comm
        };
        // 将该js对象 序列化为 jsonString
        var payload = JSON.stringify(payloadJson);


        var xhr = createXMLRequest();
        var uri = "/01_jspBasics/test/nativeAjax";
        xhr.open("POST", uri, true);
        //设置请求头的内容类型

        xhr.setRequestHeader("Content-Type","application/json;charset=utf-8");
        xhr.onreadystatechange = function(){
            processResponse(xhr);
        }
        xhr.send(payload);
    }
    function processResponse(xhr) {

        if(xhr.readyState == 4) {

            if(xhr.status == 200){
                //  将jsonstring 转化成 jsObject
                var jsObject = JSON.parse(xhr.responseText) ;
                console.log("result: " + jsObject) ;
                var result = jsObject.result;
                var showRating = document.getElementById("showRating");
                showRating.innerHTML = result;
                showRating.style.display = "";
            }

        }


    }




</script>


</body>
</html>
